//css3浏览器前缀
//$property：属性名称
//$value：属性的值
@mixin css3($property, $value) {
    @each $prefix in -webkit-, '' {
        #{$prefix}#{$property}: $value;
    }
}

//清除浮动
@mixin clearfix() {
    zoom: 1;
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

//添加省略号
//$num：在第几行添加省略号
@mixin ell($num) {
    display: -webkit-box;
    -webkit-line-clamp: $num;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

//创建箭头
//$direction：箭头方向
//$size：箭头大小
//$color：箭头颜色
@mixin arrow($direction, $size, $color) {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    border-width: $size;
    cursor: pointer;
    @if $direction == top {
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent $color transparent;
        border-top: none;
    }
    @else if $direction == bottom {
        border-style: solid dashed dashed dashed;
        border-color: $color transparent transparent transparent;
        border-bottom: none;
    }
    @else if $direction == right {
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent $color;
        border-right: none;
    }
    @else if $direction == left {
        border-style: dashed solid dashed dashed;
        border-color: transparent $color transparent transparent;
        border-left: none;
    }
}

//px转换为rem
//$property：属性名称
//$px-values：px的值
//$baseline-px：根元素font-size大小
@mixin px2rem($property,$px-values,$baseline-px:75px){
    //Conver the baseline into rems
    $baseline-rem: $baseline-px / 1rem * 1;

    @if type-of($px-values) == "number" {
        #{$property}: $px-values / $baseline-rem;
    }
    @else {
        //Create an empty list that we can dump values into
        $rem-values:();
        @each $value in $px-values {
            // If the value is zero or not a number, return it
            @if $value == 0 or type-of($value) != "number" {
                $rem-values: append($rem-values, $value / $baseline-rem);
            }
        }
        // Return the property and its list of converted values
        #{$property}: $rem-values;
    }
}

@mixin font-dpr($font-size) {
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size:$font-size * 2;
    }

    [data-size="3"] & {
        font-size:$font-size * 3;
    }

}
@mixin blankH($height:24px, $marginTop:30px) {
    @include px2rem(height, $height);
    width: 100%;
    background-color: $color-bg;
    border-top: 1px solid $color-border2;
    border-bottom: 1px solid $color-border2;
    @include px2rem(margin-top, $marginTop);
}

// 背景图片
@mixin bgImage($url, $size:cover) {
    background-image: url($url);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: $size;
}
